<template>
  <div :class="from=='withdraw' ? 'c-bg-sgray c-ph24 c-pt20' : ''">
    <div v-if="from=='income'" class="c-fs20 c-bg-sgray c-h" ref="bgHeight">
      <div class="c-pb60">
        <div class="theme-bg-gradient c-pt66 c-p c-hh260">
          <div class="incomeBox c-bg-white c-br12 c-pv30 c-ph20 c-pa c-p-l24 c-p-r24">
            <div class="c-pb24 c-bd-b1">
              <div class="c-fs36 c-fw-b c-pb8">{{incomeStastics.incomeAmount}}</div>
              <div>收益(元)</div>
            </div>
            <div class="c-flex-row c-justify-sb c-pt30">
              <div class="c-flex-column">
                <div class="c-textAlign-l c-fs26">{{incomeStastics.saleAmount}}</div>
                <div class="c-pt12">推广销售额(元)</div>
              </div>
              <div class="c-flex-row">
                <div class="c-flex-column">
                  <div class="c-textAlign-l c-fs26">{{incomeStastics.orderNum}}</div>
                  <div class="c-pt12">成单数</div>
                </div>
                <div class="c-flex-column c-pl100 c-pr70">
                  <div class="c-textAlign-l c-fs26">{{incomeStastics.peopleNum}}</div>
                  <div class="c-pt12">成单人数</div>
                </div>
              </div>
              <div class="c-pa c-p-t20 c-p-r20 c-fc-gray c-fs22" @click="changeArrowStatus">
                <span class="c-inlineblack c-vcAlign-middle">{{chooseType == 0 ? '7天' : chooseType == 1 ? '本月' : '总计'}}
                  <span class="iconfont c-fs12">{{arrowStatus ? '&#xe6ab;' : '&#xe6a9;'}}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-pv20 c-mt10 c-ph24">
        <my-small-tabbar :tabList="tabList1" :tabIndex="typeBar" :flexClass="'c-justify-start'" :isScroll="true" v-if="isDistribution && from == 'income'" @changeTab="changeType"></my-small-tabbar>
      </div>
      <div class="c-br10 c-ph24 c-bg-sgray">
        <div class="c-ph24 c-pv20 c-bg-white c-mb20 c-br10" v-for="(item,index) in dataInfo" :key="index">
          <div class="c-flex-row c-justify-sb c-aligni-center" v-if="item.outType != 1 && item.outType != 2">
            <div class="c-flex-row c-aligni-center">
              <img :src="$addXossFilter(item.avatar, require('@/assets/defult_head.png'))" alt="" class="c-hh56 c-ww56 c-brp50">
              <span class="c-pl8 c-fw-b c-text-ellipsis1 c-maxw242">{{item.nickname}}</span>
            </div>
            <div class="c-fc-gray">{{item.tag}}</div>
          </div>
          <div class="c-pv20 c-bd-b1 c-flex-row">
            <div class="c-br10 c-ww180 c-hh120 c-text-hidden">
              <div v-if="item.prodType == cfrom.datum" class="c-w100">
                <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.img, require('@/assets/i/wap/datum/datumsDefault.png'))" alt="" />
              </div>
              <img
                v-else-if="item.prodType == cfrom.agentApply || item.prodType == cfrom.partnerApply || item.prodType == cfrom.branchApply || item.prodType == cfrom.cooApply || item.prodType == cfrom.agencyApply || item.prodType == cfrom.agent6Apply || item.prodType == cfrom.agent7Apply || item.prodType == cfrom.agent8Apply || item.prodType == cfrom.agent9Apply"
                v-lazy="require('../../../assets/agentApply.png')" class="c-w100 imgCloseBig" />
              <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'imgCloseBig c-br10'" :fontClass="{
                boxStyle: 'c-pv20 c-pl12',
                name: 'c-fs24 c-text-ellipsis1 c-fw-b',
                duration: 'c-fs18'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}" v-else-if="item.vipInfo && item.vipInfo.cover" />
              <img v-else-if='item.prodType == cfrom.exam' v-lazy="(item.img==''||item.img==null)?require('../../../assets/examination_defult.png'):item.img" :key="item.img"
                class="c-w100 imgCloseBig c-br10" />
              <img v-else v-lazy="(item.img==''||item.img==null)?require('../../../assets/defult270.png'):item.img" :key="item.img" class="c-w100 imgCloseBig c-br10" />
            </div>
            <div class="c-w0 c-flex-grow1 c-pl20">
              <div class="c-fs24 c-fw-b c-text-ellipsis1">{{item.prodName}}</div>
              <div class="c-flex-row c-aligni-center c-pt10">
                <span class="c-pr10 c-fs20 c-fc-gray">到账：{{incomeDestMap[item.dest]}}</span>
              </div>
              <div class="c-pt10 c-fc-gray">{{item.outType == 1 ? '中奖时间': item.outType == 2 ? '领取时间' : '结算时间'}}: {{item.createdAt}}</div>
            </div>
          </div>
          <div v-if="item.outType == 1 ||item.outType == 2" class="c-flex-row c-justify-sb c-pt20 c-fc-gray">
            <span >{{item.outType == 1 ? '直播抽奖':'直播福利'}}</span>
            <span class="theme-fc c-pl6 c-pr10">{{'￥' | iosPriceFilter}}{{item.amount}}</span>
          </div>
          <div v-else class="c-flex-row c-justify-sb c-pt20 c-fc-gray">
            <div>
              <div class="c-fc-gray">购买{{typeMap[item.prodType]}}</div>
            </div>
            <div class="c-flex-row c-justify-sb">
              <div>实付{{'￥' | iosPriceFilter}}<span class="c-pl6">{{item.payMoney}}</span></div>
              <div class="c-pl10">{{item.type == 120 || item.type == 188 ? '退款' : '推广收益'}}<span class="theme-fc c-pl6 c-pr10">{{'￥' | iosPriceFilter}}{{item.amount}}</span></div>
            </div>
          </div>
        </div>
        <loading-status-tem :noData="noneShow" :noMoreData="loadingStatus == 'NO_MORE_DATA' && !noneShow" :noDataText="from=='activity' ? '暂无人员' : '暂无相关明细'" :showLoading="isLoading">
        </loading-status-tem>
      </div>
      <div class="masker" v-if="isShowMasker" @click="closeMasker"></div>
      <open-modal class="c-pz1000" :openModal="isShowChooseTime" @closeModal="isShowChooseTime = false" v-if="isShowChooseTime">
        <div class="c-pf c-p-b0 c-p-l0 c-br-tl10 c-br-tr10 c-bg-white c-ph24 c-pz1000 c-w100">
          <div class="c-textAlign-c c-fw-b c-fs28 c-pv30">时间选择</div>
          <div class="c-flex-row c-justify-sb c-pv24 c-fs24" v-for="(item,index) in timeKind" :key="index" :class="timeKind.length -1 == index ? '' : 'c-bd-b1'" @click="selectTime(index)">
            <div>{{item}}</div>
            <div class="iconfont" :class="chooseType == index ? 'theme-fc' : ''">{{chooseType == index ? '&#xe6f6;' : '&#xe6f7;'}}</div>
          </div>
        </div>
      </open-modal>
    </div>
    <div :class="from=='withdraw' ? 'c-bg-sgray' : 'c-bg-white'" v-else >
      <div :class="dataInfo && dataInfo.length > 0 && from == 'record' ? 'c-bg-sgray c-pb10':''">
        <my-small-tabbar :tabList="tabList" :tabIndex="listType" @changeTab="changeTab" v-if="from == 'record'" class="c-bg-white"></my-small-tabbar>
      </div>
      <!-- 活动名单 -->
      <div v-if="from=='activity' || from == 'reservation' || from == 'sectionInfo'">
        <div class="c-ph24 c-pv16 c-bd-t1 c-flex-row c-justify-sb c-aligni-center" v-for="(item,index) in applyList" :key="index">
          <div class="c-flex-column c-textAlign-c c-p c-ww90">
            <img v-lazy="item.headimgurl || require('../../../assets/defult_head.png')" class="c-ww70 c-hh70 c-brp50" :key="item.headimgurl" />
            <div v-if="from=='activity'" class="enroll-number">x{{item.number}}</div>
          </div>
          <div class="c-fs24 c-fc-xblack c-flex-1 c-maxw280 c-text-ellipsis1">{{item.nickName || '未知'}}</div>
          <div class="c-fs24 c-fc-gray c-lh"></div>
          <div class="c-flex-column c-textAlign-r">
            <span class="c-fs20 c-fc-gray c-mt10 c-lh">{{item.createdAt}}</span>
          </div>
        </div>
      </div>
      <!-- 常规的 消费列表 提现记录等 -->
      <div v-else class="c-flex-row" :class="from == 'record' ? 'c-ph24 c-bd-b1 c-pv20': item.status == -1 ? 'c-ph20 c-pt28 c-pb22 c-bg-white c-br10 c-mb20' : 'c-ph20 c-pv28 c-bg-white c-br10 c-mb20'" v-for="(item,index) in dataInfo" :key="index">
        <div :class="{'c-flex-column':true, 'c-w80': from=='record'&& item.prodType == 97, 'c-w25': from=='income', 'c-textAlign-c c-text-ellipsis1 c-text-hidden': from=='income'}">
          <div v-if="from == 'withdraw'">
            <img v-if="item.dest == 1" :src="require('../../../assets/i/wap/voting/bank.png')" class="c-ww56 c-hh56 c-brp50 c-m-0auto" />
            <span v-else class="iconfont c-fs56 c-fc-green">&#xe928;</span>
          </div>
          <!-- 消费记录 约课复训多展示一个专场名称-->
          <div class="c-fs24 c-fc-xblack c-lh c-pb16 c-maxw400" v-if="from == 'record'">
            <span :class="{'c-maxw50 c-text-ellipsis1 c-text-hidden': item.prodType == 97}">{{item.prodName}}</span>
            <span class="c-maxw50 c-text-ellipsis1 c-text-hidden" v-if="item.prodType == 97">+ {{item.extProdName}}</span>
          </div>
          <span class="c-fs24 c-fc-gray c-mt10 c-lh" v-if="from == 'record'">{{item.paymentMethod == 14 ? '虚拟币支付' : item.paymentMethod==1?'微信支付':item.paymentMethod==20?'支付宝支付':'余额支付'}}</span>
        </div>
        <!-- 收入明细类型 -->
        <div class="c-fs24 c-fc-xblack c-w25 c-textAlign-c" v-if="(from == 'income')">{{typeBar == 2 ? item.prodName :(typeMap[item.type] ? '购买' + typeMap[item.type] : item.type)}}</div>
        <!-- 提现类型 -->
        <div class="c-fs26 c-fc-xblack c-pl16 c-w0 c-flex-grow1 " v-if="from == 'withdraw'">
          <div :class="item.status == -1 && item.rejectReason ? 'c-pb20 c-bd-b1-f6' : ''">
            <div class="c-flex-row c-justify-sb c-aligni-end">
              <div class="c-fs26">提现到{{item.dest==1 ? '银行卡' : '微信'}}</div>
              <div class="c-fs32 c-lh c-textAlign-r c-fc-xblack"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.amount}}</div>
            </div>
            <div class="c-flex-row c-justify-sb c-mt16 c-fs20 c-aligni-center">
              <div class="c-fc-gray">提现{{Number(item.amount) + Number(item.fee)}}元, 手续费{{item.fee}}元</div>
              <div class="c-lh" :class="item.status == -1 ? 'c-fc-xmlred' : item.status == 2 ? 'c-fc-gray' : 'c-fc-green'">{{item.status == -1 ? '已驳回' : item.status == 2 ? '已通过' : '处理中'}}</div>
            </div>
            <div class="c-fc-gray c-mt16 c-fs20">申请时间: {{item.createdAt}}</div>
          </div>
          <div @click="getMore(index)" ref="index">
            <div class="c-p c-pt20 c-lh32 c-fc-gray" :class="dataInfo[index].isShow == true ? '' : 'c-text-ellipsis2'" v-if="item.status == -1 && item.rejectReason">
              <span class="c-fs20 c-fc-xblack c-wordBreakAll">{{countLength(item.rejectReason, index)}}</span>
              <span class="iconfont c-fs20 c-pl20" v-if="dataInfo[index].isTwoLine == true && dataInfo[index].isShow == false">&#xe6a9;</span>
            </div>
          </div>
        </div>
        <!-- 消费类型 -->
        <div class="c-flex-column c-textAlign-r c-w0 c-flex-grow1 c-justify-sb" v-if="from == 'record'">
          <span class="c-fs20 theme-fc c-mt10 c-lh c-textAlign-r">{{'￥' | iosPriceFilter}}{{item.amount || '0.00'}}</span>
          <span class="c-fs20 c-fc-gray c-mt10 c-lh c-pt10">{{item.createdAt}}</span>
        </div>
      </div>
      <loading-status-tem :noData="noneShow" :noMoreData="loadingStatus == 'NO_MORE_DATA' && !noneShow" :noDataText="from=='activity' ? '暂无人员' : '暂无相关明细'" :showLoading="isLoading">
      </loading-status-tem>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { utilJs } from "@/utils/common.js"
// let pageIndex = 1; //当前页面
let learningIndex = 1; //知识消费页码
let mallIndex = 1; //商城消费页码
export default {
  name: 'RecordList',
  components: {
    loadingStatusTem,
    MySmallTabbar,
    VipCustomImg
  },
  props: [],
  beforeCreate() {

  },
  created() {
    utilJs.appShare(this);
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      cfrom: global.ckFrom,
      page: 1,
      isDistribution: 0,
      typeBar: 1,
      incomeDestMap:{
        1: '用户余额',
        2: '微信零钱',
        20: '分账中'
      },
      typeMap: global.prodMapType,
      from: '',
      dataInfo: [],
      applyList: [],
      noneShow: false,
      pageSize: 15,
      activityPage: 1,
      loadingStatus: "NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      isLoading: false,
      tabList: [{
        title: '知识消费',
        index: 1,
      }, {
        title: '商城消费',
        index: 2,
      }],
      tabList1: [{
        title: '知识收入',
        index: 1,
      }, {
        title: '推广收入',
        index: 2,
      }, {
        title: '红包收入',
        index: 3,
      }],
      listType: 1,
      arrowStatus: false,
      incomeStastics: "",
      isShowChooseTime: false,
      isShowMasker: false,
      timeKind: ["7天", "本月", "总计"],
      circelStatus: false,
      timeType: 0, //0:总计 1:近7天 2:近30天
      chooseType: 2, // 默认近30天
      isTwoLine: [], //是否显示展开箭头
      strLength: 0,
    }
  },
  mounted() {
  },
  computed: {
  },
  methods: {
    // 切换消费记录tab
    changeTab(tabIndex) {
      this.listType = tabIndex;
      learningIndex = 1;
      mallIndex = 1;
      this.dataInfo = [];
      if (this.listType == 1) {
        this.getRecordListList();
      } else {
        this.getmallList();
      }
    },
    changeType(type) {
      this.typeBar = type;
      learningIndex = 1;
      this.dataInfo = [];
      this.getRecordListList();
    },
    pagination() {
      if (this.$route.query.from == 'activity') {
        this.getApplyList()
      } else if (this.$route.query.from == 'reservation') { // 约课主题的已购买列表
        this.getApplyListByReservation()
      } else if (this.$route.query.from == 'sectionInfo') { // 约课场次详情的已预约列表
        this.getApplyListBySectionInfo()
      } else {
        this.getRecordListList();
      }
    },
    // 获取知识消费记录
    getRecordListList() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        let url = this.from == 'withdraw' ? 'members/widthdrawLogs?page=' : (this.from == 'income' ? `members/getIncomeDetailList?timeType=${this.timeType}&type=${this.typeBar}&page=` : 'members/consumeLogs?page=')
        // this.loadingStatus = 'LOADING';
        // if (this.typeBar == 2) {
        //   url = 'members/distributionIncomeList?page=';
        // }
        if (this.from == 'income') {
          utilJs.getMethod(global.apiurl + "members/incomeStastics?timeType=" + this.timeType, res => {
            this.incomeStastics = "";
            this.incomeStastics = res;
          })
        }
        utilJs.getMethod(global.apiurl + url + learningIndex + '&limit=' + this.pageSize, function (res) {
          res.data.forEach((item, index) => item.isShow = false)
          if (learningIndex == 1) {
            $this.dataInfo = res.data;
          } else {
            $this.dataInfo = [...$this.dataInfo, ...res.data];
          }
          if ($this.dataInfo.length == 0) {
            $this.noneShow = true;
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.noneShow = false;
          }
          if (res.data && res.data.length < $this.pageSize) {
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.loadingStatus = 'LOAD_MORE';
            learningIndex++;
          }
          $this.isLoading = false;
        });
      }
    },
    // 获取商城消费记录
    getmallList() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(`${global.apiurl}members/mallConsumeLogs?page=${mallIndex}&limit=${this.pageSize}`, function (res) {
          if (mallIndex == 1) {
            $this.dataInfo = res.data;
          } else {
            $this.dataInfo = [...$this.dataInfo, ...res.data];
          }
          if ($this.dataInfo.length == 0) {
            $this.noneShow = true;
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.noneShow = false;
          }
          if (res.data && res.data.length < $this.pageSize) {
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.loadingStatus = 'LOAD_MORE';
            mallIndex++;
          }
          $this.isLoading = false;
        });
      }
    },
    getApplyList() {
      // 获取活动报名列表
      let activityId = this.$route.query.activityId;
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        // $this.loadingStatus = 'LOADING';
        utilJs.postMethod(global.apiurl + 'activities/mgperson', { activityId: activityId, page: this.activityPage, limit: this.pageSize }, function (res) {
          if ($this.activityPage == 1) {
            $this.applyList = res.data;
          } else {
            $this.applyList = [...$this.applyList, ...res.data];
          }
          if ($this.applyList.length == 0) {
            $this.noneShow = true;
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.noneShow = false;
          }
          if (res.data && res.data.length < $this.pageSize) {
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.loadingStatus = 'LOAD_MORE';
            $this.activityPage++
          }
          $this.isLoading = false;
        })
      }
    },
    getApplyListByReservation() {
      // 约课已购买列表
      let rtId = this.$route.query.activityId;
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this
        // $this.loadingStatus = 'LOADING';
        utilJs.getMethod(global.apiurl + 'reservations/getOrderList?rtId=' + rtId + '&page=' + this.activityPage + '&limit=' + this.pageSize, function (res) {
          if ($this.activityPage == 1) {
            $this.applyList = res.data;
          } else {
            $this.applyList = [...$this.applyList, ...res.data];
          }
          if ($this.applyList.length == 0) {
            $this.noneShow = true;
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.noneShow = false;
          }
          if (res.data && res.data.length < $this.pageSize) {
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.loadingStatus = 'LOAD_MORE';
            $this.activityPage++
          }
          $this.isLoading = false;
        })
      }
    },
    getApplyListBySectionInfo() {
      // 约课场次已预约列表
      let rtId = this.$route.query.activityId;
      let rsId = this.$route.query.rsId;
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this
        // $this.loadingStatus = 'LOADING';
        utilJs.getMethod(global.apiurl + 'reservations/getEnrollList?rtId=' + rtId +
          '&rsId=' + rsId +
          '&limit=' + this.pageSize +
          '&page=' + this.activityPage,
          function (res) {
            if ($this.activityPage == 1) {
              $this.applyList = res.data;
            } else {
              $this.applyList = [...$this.applyList, ...res.data];
            }
            if ($this.applyList.length == 0) {
              $this.noneShow = true;
              $this.loadingStatus = "NO_MORE_DATA";
            } else {
              $this.noneShow = false;
            }
            if (res.data && res.data.length < $this.pageSize) {
              $this.loadingStatus = "NO_MORE_DATA";
            } else {
              $this.loadingStatus = 'LOAD_MORE';
              $this.activityPage++
            }
            $this.isLoading = false;
          }
        );
      }
    },
    changeArrowStatus() {
      this.arrowStatus = !this.arrowStatus;
      this.isShowChooseTime = true;
      this.isShowMasker = true;
    },
    closeMasker() {
      this.arrowStatus = !this.arrowStatus;
      this.isShowChooseTime = false;
      this.isShowMasker = false;
    },
    selectTime(index) {
      this.chooseType = index;
      learningIndex = 1;
      this.timeType = index == 0 ? 1 : index == 1 ? 2 : 0;
      this.circelStatus = !this.circelStatus;
      this.isShowChooseTime = false;
      this.isShowMasker = false;
      this.dataInfo = [];
      this.getRecordListList();
    },
    getMore(index) {
      this.$set(this.dataInfo[index], 'isShow', true)
    },
    countLength(rejectReason, index) {
      if (rejectReason.length > this.strLength && this.dataInfo[index].isShow == false) {
        this.$set(this.dataInfo[index], 'isTwoLine', true)
        return `驳回理由: ${rejectReason.substr(0, this.strLength)}...`;
      } else if (rejectReason.length > this.strLength && this.dataInfo[index].isShow == true) {
        return `驳回理由: ${rejectReason}`;
      } else if (rejectReason && rejectReason.length <= this.strLength) {
        return `驳回理由: ${rejectReason}`;
      } else {
        return `${rejectReason}`;
      }
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.loadingStatus == 'LOAD_MORE') {
          that.pagination();
        }
      });
    }
  },
  activated() {
    this.from = this.$route.query.from;
    this.listType = 1;
    this.isDistribution = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth")).enableDistributionMarketModule;
    let title = '';
    switch (this.from) {
      case 'income':
        title = '收入明细';
        break;
      case 'withdraw':
        title = '提现记录';
        break;
      case 'activity':
        title = '活动报名列表';
        break;
      case 'reservation':
        title = '约课购买列表';
        break;
      case 'sectionInfo':
        title = '约课预约列表';
        break;
      default:
        title = '消费记录';
        break;
    }
    // let title = this.from == 'income' ? '收入明细' : (this.from == 'withdraw' ? '已提现' : this.from == 'activity' ? '活动报名列表' : '消费记录');
    setDocumentTitle(title);// eslint-disable-line
    this.dataInfo = []
    this.applyList = [];
    this.isTwoLine = [];
    this.typeBar = 1;
    this.arrowStatus = false;
    this.isShowChooseTime = false;
    this.isShowMasker = false;
    this.circelStatus = false;
    this.incomeStastics = "";
    this.timeType = 0;
    this.chooseType = 2;
    this.typeMap = global.prodMapType;
    this.typeMap[global.ckFrom.qa] = localStorage.getItem("questionCustom") == 1 ? "预约专区" : "付费问答";
    this.typeMap[global.ckFrom.answer] = localStorage.getItem("questionCustom") == 1 ? "预约专区" : "付费问答";
    this.typeMap[global.ckFrom.circusee] = localStorage.getItem("questionCustom") == 1 ? "围观预约" : "围观问题";
    this.typeMap[global.ckFrom.agentApply] = JSON.parse(localStorage.getItem("customName")).agentName;
    this.typeMap[global.ckFrom.partnerApply] = JSON.parse(localStorage.getItem("customName")).partnerName;
    this.typeMap[global.ckFrom.branchApply] = JSON.parse(localStorage.getItem("customName")).branchName;
    this.typeMap[global.ckFrom.cooApply] = JSON.parse(localStorage.getItem("customName")).cooName;
    this.typeMap[global.ckFrom.agencyApply] = JSON.parse(localStorage.getItem("customName")).agencyName;
    this.typeMap[global.ckFrom.agent6Apply] = JSON.parse(localStorage.getItem("customName")).agent6Name;
    this.typeMap[global.ckFrom.agent7Apply] = JSON.parse(localStorage.getItem("customName")).agent7Name;
    this.typeMap[global.ckFrom.agent8Apply] = JSON.parse(localStorage.getItem("customName")).agent8Name;
    this.typeMap[global.ckFrom.agent9Apply] = JSON.parse(localStorage.getItem("customName")).agent9Name;
    if (this.$route.query.from == 'activity') { // 活动已报名列表
      this.activityPage = 1
      this.getApplyList()
    } else if (this.$route.query.from == 'reservation') { // 约课主题的已购买列表
      this.activityPage = 1
      this.getApplyListByReservation()
    } else if (this.$route.query.from == 'sectionInfo') { // 约课场次详情的已预约列表
      this.activityPage = 1
      this.getApplyListBySectionInfo()
    } else { // 消费列表 等
      learningIndex = 1
      this.getRecordListList()
    }
    this.isLoading = false;
    if (this.from == 'income') {
      this.$nextTick(res => {
        this.$refs.bgHeight.style.minHeight = `${window.screen.availHeight}px`;
      })
    }
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
    this.strLength = 0;
    if (window.screen.availWidth > 320) {
      this.strLength = 40
    } else {
      this.strLength = 32
    }
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.enroll-number {
  background-color: #fa703d;
  color: white;
  border-radius: 0.25rem 0.25rem 0.25rem 0;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.4rem;
  padding: 0 0.15rem 0 0.15rem;
  height: 0.5rem;
  font-style: italic;
}
.c-maxw280 {
  max-width: 7rem;
}
.c-maxw400 {
  max-width: 10rem;
}
.incomeBox {
  width: calc(100% - 1.2rem);
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.income-status-tag{
  width: 1.9rem;
  height: 0.8rem;
  background: rgba(255,48,12,0.1);
  border-radius: 0.1rem;
  font-size: 0.5rem;
  color: #FF300C;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
